<template>
  <div>
    <div class="flex justify-between items-center pr-4 py-2 bg-white">
      <LayoutBreadcrumb class="grow" />
      <a-select ref="select" placeholder="请选择采集点" value="a" style="width: 200px">
        <a-select-option value="a">某地桥梁监控分析</a-select-option>
      </a-select>
    </div>

    <div class="mt-2 p-2 bg-white flex justify-between">
      <thisSearch />
      <div>
        <a-button type="primary"> 导出图表 </a-button>
        <a-button type="primary" class="ml-2"> 导出数据 </a-button>
      </div>
    </div>

    <div class="mt-2 px-2">
      <a-tabs v-model:activeKey="activeKey" type="card">
        <a-tab-pane key="1" tab="查看趋势图">
          <thisTab1 class="-mt-2" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="查看数据列表">
          <this-tab2 class="-mt-2" />
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
  <script lang="ts">
import { defineComponent, ref } from 'vue';
import { LayoutBreadcrumb } from '../../../../layouts/default/header/components';
import thisSearch from '../comp/search.vue';
import thisTab1 from './tab1.vue';
import thisTab2 from '../../query/table.vue';

export default defineComponent({
  components: { LayoutBreadcrumb, thisSearch, thisTab1, thisTab2 },
  setup() {
    const keyword = ref('');
    const activeKey = ref('1');
    return {
      keyword,
      activeKey,
    };
  },
});
</script>
